<!--
  This template loads for the 'tab.friend-detail' state (app.js)
  'friend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
  The FriendsCtrl pulls data from the Friends service (service.js)
  The Friends service returns an array of friend data
-->
<ion-view view-title="订座详情" class="xg-bus-detail-view">
    <ion-nav-buttons side="left">
        <a class="ion-ios-arrow-back" href="#/jidi_holi"></a>
    </ion-nav-buttons>
    <ion-content class="padding xg-bus-detail-content">
        <div class="xg-bus-detail-info">
            <p>路线：{{bus.routeName}}</p>
            <p>时间：{{bus.departuredate}}</p>
            <div id="legend"></div>
        </div>
        <div class="wrapper">
            <div class="container">
                <div class="xg-seats">
                    <table>
                        <tr>
                            <td class="xg-seats-head">{{bus.number}} 号车</td>
                        </tr>
                        <tr ng-repeat="s in seats" class="seat-btn">
                            <td><button class="button " ng-click="ticketSeat(s.num1)" ng-disabled="s.name1!=''"  ng-class="{'seats-unavailable':s.name1!='' && s.type1 == 0,'seats-unavailable1':s.name1!='' && s.type1 == 1,'seats-unavailable2':s.name1!='' && s.type1 == 2,'seats-available':s.name1==''}">{{s.num1}}<span class="seats-name">{{s.name1}}</span></button></td>
                            <td ng-if="s.num2!=undefined"><button class="button" ng-click="ticketSeat(s.num2)" ng-disabled="s.name2!=''" ng-class="{'seats-unavailable':s.name2!='' && s.type2 == 0,'seats-unavailable1':s.name2!='' && s.type2 == 1,'seats-unavailable2':s.name2!='' && s.type2 == 2,'seats-available':s.name2==''}">{{s.num2}}<span class="seats-name">{{s.name2}}</span></button></td>
                            <td class="xg-seats-road">过道</td>
                            <td ng-if="s.num3!=undefined"><button class="button" ng-click="ticketSeat(s.num3)" ng-disabled="s.name3!=''"  ng-class="{'seats-unavailable':s.name3!='' && s.type3 == 0,'seats-unavailable1':s.name3!='' && s.type3 == 1,'seats-unavailable2':s.name3!='' && s.type3 == 2,'seats-available':s.name3==''}">{{s.num3}}<span class="seats-name">{{s.name3}}</span></button></td>
                            <td ng-if="s.num4!=undefined"><button class="button" ng-click="ticketSeat(s.num4)" ng-disabled="s.name4!=''"  ng-class="{'seats-unavailable':s.name4!='' && s.type4 == 0,'seats-unavailable1':s.name4!='' && s.type4 == 1,'seats-unavailable2':s.name4!='' && s.type4 == 2,'seats-available':s.name4==''}">{{s.num4}}<span class="seats-name">{{s.name4}}</span></button></td>
                        </tr>

                    </table>
                    <script id="ticketSeatModal" type="text/ng-template">
                        <div class="modal xg-percar-view">
                            <ion-header-bar class="booking-modal">
                                <h1 class="title">预定车票</h1>
                            </ion-header-bar>
                            <ion-content class="booking-modal-content xg-percar-content">
                                <p class="booking-modal-p">您预订的车票信息如下：</p>
                                <ion-list class="xg-percar-ul float-fix">
                                    <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work">
                                        <div class="float-fix">
                                            <span class="ion-ios-clock-outline">
                                            </span>
                                            <p>时间：{{bus.departuredate}}</p>
                                        </div>
                                        <div class="float-fix">
                                            <span class="ion-ios-loop"></span>
                                            <p>路线：{{bus.routeName}}</p>
                                        </div>
                                        <div class="float-fix">
                                            <span class="ion-ios-location-outline"></span>
                                            <p>位置：{{bus.number}} 号车，第 {{ticketData.num}} 位</p>
                                        </div>
                                        <div class="float-fix">
                                            <span class="ion-ios-person-outline"></span>
                                            <p>乘坐人：{{ticketData.seatname}}</p>
                                        </div>
                                      <div class="float-fix" style="padding-top: 10px;padding-left: 10px">
                                        <ul class="list is-family-toggle">
                                          <li class="item item-toggle">
                                            是否亲属乘坐<label class="toggle toggle-calm">
                                            <input type="checkbox" ng-model="ticketData.relativeChecked">
                                            <div class="track">
                                              <div class="handle"></div>
                                            </div>
                                          </label>
                                          </li>
                                        </ul>
                                       <p ng-if="ticketData.relativeChecked"><select ng-options="relative.name for relative in ticketData.relatives " ng-change="ticketData.selectChange()" ng-disabled="!ticketData.relativeChecked" ng-model="ticketData.selectedRelative"></select> </p>
                                      </div>
                                    </ion-item>
                                </ion-list>
                                <div class="float-fix xg-check-detail">
                                  <button class="button xg-check-detail-btnl" ng-click="closeModal()">
                                    取消
                                  </button>
                                    <button class="button xg-check-detail-btnr" ng-click="ticketData.insert()">
                                        预定
                                    </button>

                                </div>
                            </ion-content>
                        </div>
                    </script>
                </div>

            </div>
        </div>

        <!--     <script src="js/seat-charts/jquery-1.11.3.min.js"></script>
            <script src="js/seat-charts/jquery.seat-charts.js"></script> -->

    </ion-content>
</ion-view>
